<template>
  <div class="marketingOrderDispatchStats-container">
    <div class="form-container flex flex-column">
      <div class="form color333 flex flex-center" @click="showcalendar = true">
        <span class="label">统计时间：</span>
        <span class="select rel">{{ form.startTime + ' - ' + form.endTime }}</span>
        <img class="img" src="../../../../assets/imgs/reconsitution/statistics/jt_xl.png" alt="" />
      </div>
      <GdXceoAppBreadcrumb :orgCode="orgCode" @breadcrumbCallBack="handlebreadcrumbCallBack"></GdXceoAppBreadcrumb>
    </div>
    <div class="split"></div>
    <a-table
      size="small"
      bordered
      :columns="tableColumns"
      :data-source="tableData"
      :loading="tableLoading"
      :pagination="false"
      :scroll="{ y, x: 800 }"
      class="table-container"
    >
      <template slot="name" slot-scope="value, record, rowIndex">
        <span v-if="rowIndex == 0">{{ value }}</span>
        <a v-else @click="handleSelectDepart(record.org_code)">{{ value }}</a>
      </template>
    </a-table>

    <van-calendar
      title="选择统计时间"
      color="#1890ff"
      type="range"
      v-model="showcalendar"
      @confirm="handleConfirm"
      :min-date="minDate"
      :default-date="defaultDate"
    />
  </div>
</template>
  
  <script>
import GdXceoAppBreadcrumb from '../marketingOrderDispatchStats/components/breadcrumb.vue'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { parseResultAction } from '@/api/manage'
import tableColumns from './common'
export default {
  name: 'marketingOrderDispatchStats',
  components: { GdXceoAppBreadcrumb },
  data() {
    return {
      userDataPermission: {},
      orgCode: '',
      tableLoading: false,
      form: {
        startTime: '',
        endTime: '',
      },
      tableData: [],
      showcalendar: false,
      tableColumns,
      defaultDate: [],
      minDate: new Date(2020, 0, 1),
      y: 600
    }
  },

  mounted(){
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    this.y = viewportHeight - 250
  },

  created() {
    const userInfo = Vue.ls.get(USER_INFO)
    this.userDataPermission = userInfo.datapermissionMap
    const currentDate = new Date()
    const currentYear = currentDate.getFullYear()
    const currentMonth = currentDate.getMonth()
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1)
    this.defaultDate = [firstDayOfMonth, currentDate]
    this.form = {
      startTime: this.formatDate(firstDayOfMonth),
      endTime: this.formatDate(currentDate),
    }

    let maxOrgCode = ''
    for (const item of this.userDataPermission) {
      const { orgCode } = item
      !maxOrgCode && (maxOrgCode = orgCode)
      orgCode.split('/').length < maxOrgCode.split('/').length && (maxOrgCode = orgCode)
    }
    this.orgCode = maxOrgCode
    this.getTableData()
  },

  methods: {
    async getTableData() {
      this.tableLoading = true
      this.tableData = []
      const { startTime, endTime } = this.form
      const lastOrgId = this.orgCode.split('/')[this.orgCode.split('/').length - 1]
      const { result } = await parseResultAction('2c3a07178ba92724018bdb4d1b800018', {
        orgId: lastOrgId,
        startTime: startTime.replace(/-/g, ''),
        endTime: endTime.replace(/-/g, ''),
      })
      this.tableData = result
      this.tableLoading = false
    },
    handleSelectDepart(org_code) {
      this.orgCode = org_code
      this.getTableData()
    },
    handlebreadcrumbCallBack({ orgCode, index }) {
      this.orgCode = orgCode
      this.getTableData()
    },
    formatDate(date) {
      let month = date.getMonth() + 1
      month < 10 && (month = '0' + month)
      let day = date.getDate()
      day < 10 && (day = '0' + day)
      return `${date.getFullYear()}-${month}-${day}`
    },
    handleConfirm(date) {
      const [start, end] = date
      this.form = {
        startTime: this.formatDate(start),
        endTime: this.formatDate(end),
      }
      this.showcalendar = false
      this.getTableData()
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.marketingOrderDispatchStats-container {
  background: #fff;
  height: 100vh;

  .blue {
    color: #1890ff;
  }
  .form-container {
    background: #fff;
    margin-bottom: 2.1333vw;
    padding: 3.2vw 5.3333vw;
    .form {
      margin-bottom: 5.3333vw;
      flex-wrap: wrap;

      .img {
        width: 3.7333vw;
        height: 3.7333vw;
      }
    }
    .select {
      width: 53.3333vw;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: inline-block;
      .label {
        flex-shrink: 0;
      }
    }
  }
  .split {
    width: 100%;
    height: 2.1333vw;
    background: #f3f7fa;
  }
  .table-container {
    margin: 2.1333vw;
  }
}
</style>